<template>
	<div class="app-container">
		<el-form size="small" :inline="true" label-width="68px">
			<el-form-item label="类型" prop="status">
				<el-select v-model="value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
			</el-form-item>
		</el-form>
		
		<el-table border v-loading="loading" :data="list" show-summary :summary-method="getSummaries">
			<el-table-column label="类型" align="center" prop="type" width="120" />
			<el-table-column v-for="(goods, index) in goodsList" :key="index" :label="goods" align="center" :prop="goods"></el-table-column>
		</el-table>
		<!-- 添加总计行 -->
		<div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
			<div class="el-table__footer-wrapper">
				<table cellspacing="0" cellpadding="0" border="0" class="el-table__footer" style="width: 100%;">
					<tbody class="has-gutter">
						<tr>
							<td class="el-table_1_column_1 is-center is-leaf el-table__cell" width="120px">
								<div class="cell">总计</div>
							</td>
							<td class="el-table_1_column_1 is-center is-leaf el-table__cell" colspan="10">
								<div class="cell">{{ total }}</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
	import { getGoodsProblem, getComplaintGoodsList, getGoodsComplaintType } from "@/api/complaint/order"
	export default {
		data() {
			return {
				options: [{
					value: 1,
					label: '半年度'
				}, {
					value: 2,
					label: '年度'
				}],
				value: 2,
				startTime: '',
				endTime: '',
				total: 0,
				loading: true,
				goodsTypeList: [],
				goodsList: [],
				list: []
			}
		},
		created() {
			this.getGoodsType();
			this.getGoodsList();
		},
		methods: {
			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				console.log(param);
				
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '分项总计';
						return;
					}
					
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
					} else {
						sums[index] = '';
					}
				});
				
				return sums;
			},
			/**
			 * 问题类型
			 */
			getGoodsType() {
				this.goodsTypeList = [];
				getGoodsComplaintType().then(res => {
					console.log('问题类型', res);
					if(res.code == 200){
						res.data.forEach(item => {
							this.goodsTypeList.push(item.dictValue);
						});
					}
				})
			},
			/**
			 * 产品列表
			 */
			getGoodsList() {
				getComplaintGoodsList().then(res => {
					if (res.code == 200) {
						res.data.forEach(goods => {
							this.goodsList.push(goods.dictValue);
						});
			
						this.getList();
					}
				});
			},
			/**
			 * 问题
			 */
			getList(){
				this.total = 0;
				this.list = [];
				this.loading = true;
				
				this.getTime();
				
				getGoodsProblem(this.startTime, this.endTime).then(res => {
					console.log('问题', res);
					if(res.code == 200){
						res.data.map(item => {
							item.type = item.type.split(',');
						});
						
						console.log('问题2', res.data);
						
						this.goodsTypeList.forEach(type => {
							let numList = [];

							this.goodsList.forEach(goods => {
								let num = '';
								res.data.forEach(item => {
									
									if(goods == item.goodsName && item.type.includes(type)){
										num = item.num;
										this.total += num;
									}
								});
								
								numList.push(num);
							});
							
							let goodsList = this.goodsList.reduce((acc, key, index) => {
								acc[key] = numList[index];
								return acc;
							}, {});
							
							
							goodsList.type = type;
							this.list.push(goodsList);
						});
					}
					
					console.log('goodsList', this.list);
					
					this.loading = false;
				});
			},
			/**
			 * 获取时间
			 */
			getTime(){
				let currentYear = new Date().getFullYear();
				this.startTime = `${currentYear}-01-01 00:00:00`
				
				if(this.value == 1){ // 半年
					this.endTime = `${currentYear}-06-30 23:59:59`
				}else{ // 全年
					this.endTime = `${currentYear}-12-31 23:59:59`
				}
			}
		}
	}
</script>

<style>
</style>